<template>
  <footer class="app-footer">
    <div class="footer-content">
      <!-- 左侧：学校标志和名称 -->
      <div class="logo-section">
        <img src="@/assets/images/logo2.jpg" style="width: 350px; height: auto" />
      </div>

      <!-- 中间：联系信息和技术支持 -->
      <div class="info-section">
        <p>技术支持：贵州省高等学校智能计算与预警监测创新团队</p>
        <p>版权所有：贵州财经大学人民武装部</p>
        <p>联系电话：0851-88510441</p>
        <p>地址：贵州省花溪大学城贵州财经大学 邮编：550025</p>
      </div>

      <!-- 右侧：二维码 -->
      <div class="qr-code-section">
        <div class="qr-code">
          <img src="@/assets/images/wzbweib.jpg" alt="微博二维码" />
          <span>微博</span>
        </div>
        <div class="qr-code">
          <img src="@/assets/images/wzbwechat.jpg" alt="微信二维码" />
          <span>微信</span>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
// 这里可以添加逻辑（如果需要），比如动态生成链接或国际化支持
</script>

<style scoped>
.app-footer {
  background-color: #008b81;
  color: white;
  padding: 10px 0;
  margin-top: 20px;
  /* 关键属性：自动上边距 */
  flex-shrink: 0;
  /* 禁止收缩 */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo-section img {
  width: 150px;
  height: auto;
  margin-right: 10px;
}

.logo-section span {
  font-size: 16px;
  font-weight: bold;
}

.info-section {
  text-align: left;
  font-size: 14px;
}

.qr-code-section {
  display: flex;
  gap: 20px;
}

.qr-code {
  text-align: center;
}

.qr-code img {
  width: 100px;
  height: 100px;
}

.qr-code span {
  display: block;
  margin-top: 5px;
}
</style>